<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- computed watch -->
        <!-- v-show v-if -->
        <!-- input --- v-model -->
        <!-- 事件    原生的dom例子    vue如何解决 -->
        <!-- v-on:click | @click -->
        <!-- v-bind:class | :class | :style -->
        <!-- {{msg|表达式}}渲染 -->
        <!-- v-for|数组|数字|对象|字符串 -->
        <!-- v-for="(value, key) in obj" value | key -->

        <!-- 过滤器filter -->
        <!-- 第一个参数是，需要过滤的数据 -->
        <!-- 过滤器必须return，有返回值 -->

        <!-- 过滤器，可以多次使用 -->
        {{msg | filterMsg('过滤数据1','过滤数据2') | filterMsg2}}


        <!-- {{msg.split('')}} -->
    </div>

    <script src="js/vue.js"></script>

    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                msg:'this is my name'
            },
            methods:{},
            filters:{
                //第一个参数是需要过滤的数据
                //允许出纳入额外的参数
                filterMsg(value,param1,param2){
                    console.log('value----',value)
                    console.log('param1----',param1)
                    console.log('param2----',param2)

                    return value.split('').reverse().join('') + param1 + param2
                },
                filterMsg2(value){
                    console.log('filterMsg2',value)
                    return value
                }
            }
        })
    </script>
</body>
</html>